<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../adminlte/plugins/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app" v-cloak>

    <!-- Navbar -->
    <super-navbar></super-navbar>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <super-aside></super-aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1 class="m-0 text-dark">商品管理</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">搜索</h3>
                            <div class="card-tools">
                                <div class="input-group input-group-sm">
                                    <select class="form-control">
                                       <option v-for="type in type_list" :value="type.id">{{type.typename}}</option> 
                                    </select>
                                    <input type="text" class="form-control">
                                    <input type="text" class="form-control">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                        <table class="table table-condensed">
                        <tr>
                            <th style="width: 10%">ID</th>
                            <th style="width: 35%">名称</th>
                            <th style="width: 10%">条码</th>
                            <th style="width: 10%">价格</th>
                            <th style="width: 10%">特价</th>
                            <th style="width: 5%">库存</th>
                            <th style="width: 5%">销量</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                        <tr v-for="row in data_list">
                            <td>{{row.id}}</td>
                            <td>{{row.goods_name}}</td>
                            <td>{{row.barcode}}</td>
                            <td>{{row.price}}</td>
                            <td>{{row.special_price}}</td>
                            <td>{{row.inventory}}</td>
                            <td>{{row.sales}}</td>
                            <td>
                                <button @click="change(row.id)" type="button" class="btn btn-outline-success btn-sm">修改</button>
                                <button @click="del(row.id)" type="button" class="btn btn-outline-danger btn-sm">删除</button>
                            </td>
                        </tr>
                        </table>
                        </div>
                        <div class="card-footer clearfix">
                            <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item"><a @click="index(1)" class="page-link" href="#">&laquo;</a></li>
                                <template v-for="(val, key) in pages.all_page">
                                    <li class="page-item" :class="{active: val == pages.p}"><a @click="index(val)" class="page-link" href="#">{{val}}</a></li>
                                </template>
                                <li class="page-item"><a @click="index(pages.all_page)" class="page-link" href="#">&raquo;</a></li>
                            </ul>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
    <!-- 添加的模态框 -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../adminlte/dist/js/adminlte.js"></script>
<!-- 新加js -->
<script src="../dece/js/vue.js"></script>
<script src="../dece/js/axios.min.js"></script>
<script src="../dece/js/app.js"></script>
<script src="../dece/js/vue_component.js"></script>
<script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                data_list: {},
                type_list: {},
                pages: {},
            },
            created: function (){
                this.goods_type();
                this.index(1);
            },
            mounted: function (){

            },
            methods: {
                // 商品分类
                goods_type: function (){
                    var the = this;
                    axios.get(de.goods_goods_type).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.type_list = dd.data;
                        } else if (dd.code == 230) {
                            alert(dd.info);
                            de.href("../index.html");
                        } else {
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 列表
                index: function ( p ){
                    var the = this;
                    axios.post(de.goods_index, {tid: 1, p: p}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.data_list = dd.data;
                            the.pages = de.page(dd.page);
                        console.log(the.pages);
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                change: function ( id ){
                    var the = this;
                    axios.get(de.goods_index, {tid: 1}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.goods_list = dd.data;
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                del: function ( id ){
                    var the = this;
                    axios.get(de.goods_index, {tid: 1}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.goods_list = dd.data;
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
            },
        });
</script>
</body>
</html>
